<template>
	<view class="statistics">
		<view class="date flex_box" @click="openCalendar">
			<uni-icons type="calendar" :size="24" color="#3393FF"></uni-icons>
			<view>{{start}} - {{end}}</view>
			<uni-icons type="down" :size="20"></uni-icons>
		</view>
		<view class="card">
			<view class="header flex_r_between">
				<view class="title flex_box">
					<i></i>
					<text>数据走势</text>
				</view>
				<view class="tag">
					<view class="flex_box">
						<i></i>
						<text>接单数量</text>
					</view>
					<view class="flex_box">
						<i style="background: #EF5233;"></i>
						<text>接单金额</text>
					</view>
				</view>
			</view>
			<view class="chart" style="height: 600rpx;">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData"
				 tooltipFormat="pieDemo"
				 :canvas2d="true" :loadingType="1" />
			</view>
		</view>

		<view class="card">
			<view class="title flex_box">
				<i></i>
				<text>订单统计</text>
			</view>
			<view class="item">
				<uni-table border stripe emptyText="暂无数据" >
					<uni-tr>
						<uni-th align="center">本月订单数量</uni-th>
						<uni-th align="center">本月总收益</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">
							<text>{{month.order_num}}</text>
						</uni-td>
						<uni-td align="center">
							<view>¥{{Number(month.order_price).toFixed(2)}}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="item" style="margin: 0;">
				<uni-table border stripe emptyText="暂无数据" >
					<uni-tr>
						<uni-th align="center">加钟订单数量</uni-th>
						<uni-th align="center">加钟总收益</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">
							<text>{{month.add_num}}</text>
						</uni-td>
						<uni-td align="center">
							<view>¥{{Number(month.add_price).toFixed(2)}}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="item">
				<uni-table border stripe emptyText="暂无数据" >
					<uni-tr>
						<uni-th align="center">季度订单数量</uni-th>
						<uni-th align="center">季度总收益</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">
							<text>{{season.order_num}}</text>
						</uni-td>
						<uni-td align="center">
							<view>¥{{Number(season.order_price).toFixed(2)}}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="item" style="margin: 0;">
				<uni-table border stripe emptyText="暂无数据" >
					<uni-tr>
						<uni-th align="center">加钟订单数量</uni-th>
						<uni-th align="center">加钟总收益</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">
							<text>{{season.add_num}}</text>
						</uni-td>
						<uni-td align="center">
							<view>¥{{Number(season.add_price).toFixed(2)}}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="item">
				<uni-table border stripe emptyText="暂无数据" >
					<uni-tr>
						<uni-th align="center">年度订单数量</uni-th>
						<uni-th align="center">年度总收益</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">
							<text>{{year.order_num}}</text>
						</uni-td>
						<uni-td align="center">
							<view>¥{{Number(year.order_price).toFixed(2)}}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="item" style="margin: 0;">
				<uni-table border stripe emptyText="暂无数据" >
					<uni-tr>
						<uni-th align="center">加钟订单数量</uni-th>
						<uni-th align="center">加钟总收益</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">
							<text>{{year.add_num}}</text>
						</uni-td>
						<uni-td align="center">
							<view>¥{{Number(year.add_price).toFixed(2)}}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			
		</view>

		<view class="card">
			<view class="title flex_box">
				<i></i>
				<text>本月最佳技师TOP5</text>
			</view>
			<view class="table">
				<uni-table :stripe="false" emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="60">排名</uni-th>
						<uni-th align="center" width="60">技师名称</uni-th>
						<uni-th align="center" width="60">月单数量</uni-th>
						<uni-th align="center" width="60">总金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in technician_list" :key="index">
						<uni-td align="center">
							<image v-if="index < 3" :src="`/static/img/manage/technician_no${index+1}.png`"></image>
							<text v-if="index == 3">第四名</text>
							<text v-if="index == 4">第五名</text>
						</uni-td>
						<uni-td align="center">{{item.real_name}}</uni-td>
						<uni-td align="center">{{item.order_all_num}}单</uni-td>
						<uni-td align="center">¥{{Number(item.all_price).toFixed(2)}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		
		<view class="card">
			<view class="title flex_box">
				<i></i>
				<text>本月项目TOP5</text>
			</view>
			<view class="table">
				<uni-table :stripe="false" emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="60">排名</uni-th>
						<uni-th align="center" width="60">项目名称</uni-th>
						<uni-th align="center" width="60">月单数量</uni-th>
						<uni-th align="center" width="60">总金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in service_list" :key="index">
						<uni-td align="center">
							<image v-if="index < 3" :src="`/static/img/manage/service_no${index+1}.png`"></image>
							<text v-if="index == 3">第四名</text>
							<text v-if="index == 4">第五名</text>
						</uni-td>
						<uni-td align="center">{{item.title}}</uni-td>
						<uni-td align="center">{{item.order_all_num}}单</uni-td>
						<uni-td align="center">¥{{Number(item.all_price).toFixed(2)}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>

		<uni-calendar ref="calendar" class="uni-calendar--hook" :insert="false" :clear-date="true" :range="true"
			@confirm="confirm" :end-date="more_start" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#EF5233", "#3393FF"],
					padding: [10, 10, 10, 10],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						marginTop: 10,
						axisLineColor: '#3393FF',
						labelCount:2
					},
					yAxis: {
						gridColor: '#3393FF',
						gridType: "dash",
						dashLength: 6,
						showTitle:true,
						data: [
							{
								axisLineColor: '#EF5233',
								position:'right',
								title:'单位(元)',
								titleOffsetY:-2,
								titleFontSize:12
							},
							{
								axisLineColor: '#3393FF',
								title:'单位(单)',
								titleOffsetY:-2,
								titleFontSize:12
							},
							
						]


					},
					extra: {
						line: {
							type: "straight",
							width: 2,
						},
						tooltip: {
							// showCategory:true,
							legendShow:false,
							fontColor:'#3393FF',
							bgOpacity:0,
							fontSize:10,
							gridType:'dash',
							dashLength:6,
							gridColor:'#3393FF',
						},
					}
				},
				start: '',
				end: '',
				
				more_start:'',
				
				season:{}, // 季度订单统计
				month:{}, // 本月订单统计
				year:{}, // 年度订单统计
				technician_list:{}, // 技师top5
				service_list:{}, // 项目top5
				
			};
		},
		onLoad() {
			this.getToday()
			this.getServerData();
		},
		methods: {
			getServerData() {
				this.$get('/store.store/getStoreDataByTime',{
					times:this.start + '~' + this.end
				}).then(res=>{
					this.month = res.data.month
					this.season = res.data.season
					this.year = res.data.year
					this.technician_list = res.data.technician_list
					this.service_list = res.data.service_list
					let day = []
					let order_num = []
					let order_price = []
					res.data.order_data.forEach(item=>{
						day.push(item.day)
						order_num.push(item.order_num)
						order_price.push(Number(item.price).toFixed(2))
					})
					let option = {
						categories: day,
						series: [{
								name: "接单金额",
								data: order_price,
								pointShape: 'none',
								textColor:'#333',
								smooth:true,
								index:0
							},
							{
								name: "接单数量",
								data: order_num,
								pointShape: 'none',
								smooth:true,
								index:1
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(option));
				})
			},
			getToday() {
				let da = new Date()
				let time = new Date(Number(da) - 86400000)
				let time2 = new Date(Number(time) - 604800000)
				let year = time.getFullYear()
				let year2 = time2.getFullYear()
				let month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
				let month2 = (time2.getMonth() + 1) < 10 ? '0' + (time2.getMonth() + 1) : (time2.getMonth() + 1)
				let date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				let date2 = time2.getDate() < 10 ? '0' + time2.getDate() : time2.getDate()
				this.end = `${year}-${month}-${date}`
				this.more_start = `${year}-${month}-${date}`
				this.start = `${year2}-${month2}-${date2}`
			},
			openCalendar(){
				this.$refs.calendar.open();
			},
			confirm(e){
				this.start = e.range.before
				this.end = e.range.after
				this.getServerData()
			}
		}
	};
</script>

<style scoped lang="less">
	.statistics {
		padding: 29rpx;
	}
	.date {
		align-items: center;
		view {
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			margin: 0 10rpx;
		}
	}
	.card {
		margin-top: 19rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 25rpx 15rpx;
		.table {
			margin-top: 30rpx;
			image {
				width: 40rpx;
				height: 50rpx;
			}
			.uni-table-th {
				background: rgba(216,216,216,0.36);
				font-size: 26rpx;
				color: #838383;
				font-weight: 400;
			}
		}
		.item {
			margin-top: 20rpx;
			.uni-table-th {
				background: rgba(51, 147, 255, 0.10);
				font-size: 26rpx;
				color: #3393FF;
				font-weight: 400;
			}
			text {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
			view {
				font-size: 34rpx;
				font-weight: 600;
				color: #DD0000;
				line-height: 48rpx;
			}
		}
	}
	.header {
		align-items: flex-start;
		margin-bottom: 30rpx;
		.tag {
			view {
				align-items: center;
				margin-bottom: 10rpx;
				i {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background: #3393FF;
				}
				text {
					font-size: 24rpx;
					color: #333333;
					line-height: 33rpx;
					margin-left: 6rpx;
				}
			}
			
		}
	}
	.title {
		align-items: center;
		i {
			width: 10rpx;
			height: 34rpx;
			background: #3393FF;
			margin-right: 10rpx;
		}
		text {
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
		}
	}
</style>